<template>
  <el-table
    :show-header="false"
    :data="tableData"
    style="width: 100%"
    border
    class="covertable"
  >
    <el-table-column prop="label" width="200" class-name="label-column" />
    <el-table-column prop="value">
      <template #default="{ row }">
        <!-- 第一行：开关 -->
        <el-switch
          v-if="row.type === 'switch'"
          v-model="row.value"
          @change="handleSwitchChange"
        />
        <!-- 第二行：数字输入框 -->
        <el-input-number
          v-else-if="row.type === 'number'"
          v-model="row.value"
          :min="0"
          :max="30"
          @change="handleNumberChange"
        />
        <!-- 第三行：按钮 -->
        <el-button
          v-else-if="row.type === 'button'"
          type="primary"
          @click="handleSave"
        >
          {{ $t('couponManagement.save') }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const tableData = ref([
  {
    label: t('couponManagement.couponSwitch'),
    value: true,
    type: "switch",
  },
  {
    label: t('couponManagement.expiryReminder'),
    value: 7,
    type: "number",
  },
  {
    label: "",
    value: "",
    type: "button",
  },
]);

const handleSwitchChange = (val) => {
  console.log("开关状态：", val);
};

const handleNumberChange = (val) => {
  console.log("天数：", val);
};

const handleSave = () => {
  console.log("保存数据：", tableData.value);
};
</script>

<style lang="scss" scoped>
.covertable {
  .el-table__cell {
    padding: 12px 0;
  }

  :deep(.label-column) {
    .cell {
      text-align: right;
    }
  }
}
</style>
